<template>
    <z-paging ref="pagingRef" @query="queryList" v-model="list">
        <template #top>
            <MrCustom bg-color="bg-gradual-blue " is-back>
                <template #backText>
                    返回
                </template>
            </MrCustom>
            <z-tabs ref="tabsRef" :current="currentTab" :list="tabs" @change="tabChange"/>
            <DropdownFilter :filterData="filterData" :defaultIndex="defaultIndex"
                            @onSelected="onSelected" @dateChange="dateChange" @reset="reset"></DropdownFilter>
        </template>
        <view v-for="(item,index) in list" :key="index">
            <view class="bg-white radius-lg margin-xs padding shadow-lg shadow-blur">
                <view class="flex-sub flex justify-between align-center">
                    <view class="text-xl text-bold" :style="'color:'+ getAppointmentTypeColor(item.type)">
                        {{ getAppointmentType(item.type) }}
                    </view>
                    <view class="text-gray text-df">{{ myMoment(item.createTime).fromNow() }}</view>
                </view>
                <view class="text-center text-bold text-xxl padding">
                    <view>{{ getAppointmentStatus(item.status) }}</view>
                    <!--          <view :style="'color:'+ getAppointmentStatusColor(item.status)">{{ getAppointmentStatus(item.status) }}</view>-->
                </view>
                <view class="flex flex-sub flex-direction text-gray text-df">
                    <view class="flex padding-tb-xs">
                        <view style="width: 20vw">就诊时间：</view>
                        <view class="text-black">{{ getStartEndTimeString(item.appointmentTime) }}</view>
                    </view>
                    <view class="flex padding-tb-xs">
                        <view style="width: 20vw">就诊人：</view>
                        <view class="text-black">{{ item.patientName }}({{ item.patientUsername }})</view>
                    </view>
                    <view class="flex padding-tb-xs">
                        <view style="width: 20vw">医生：</view>
                        <view class="text-black">{{ item.nurseName }}({{ item.nurseUsername }})</view>
                    </view>
                </view>
                <view class="flex flex-sub flex-direction solid-top padding-top margin-top-xs">
                    <view @click="toDetail(item)" class="flex flex-sub justify-between">
                        <view>查看详情</view>
                        <view class="cuIcon-right text-gray"></view>
                    </view>
                </view>
            </view>
        </view>
    </z-paging>

</template>

<script setup lang="ts">
import api from "@/api";
import {useUserStore} from "@/store";
import {ref} from "vue";
import DropdownFilter from "@/pages/nurse/appointment/components/DropdownFilter.vue";
import {onLoad} from "@dcloudio/uni-app";
import {
    getAppointmentStatus,
    getAppointmentStatusColor,
    getAppointmentType,
    getAppointmentTypeColor
} from "@/utils/common/myStandard";
import {getStartEndTimeString} from "@/utils/common/myUtils";
import myMoment from "@/utils/common/myMoment";
import MrCustom from "@/components/common/MrCustom.vue";

const tabsRef = ref()
const currentTab = ref(0)
const userStore = useUserStore()
const pagingRef = ref()
const list = ref([])
const tabs = ref(['全部', '预约中', '进行中', '待回访', '已完成', '已取消'])
const filterData = [
    [{text: '全部类型', value: ''}, {text: '维护', value: '1'}, {text: '置管', value: '2'}, {text: '拔管', value: '3'}]
]
const defaultIndex = [0,]

const andParams = ref({
    type: '',
    createTime: '',
    status: '',
    nurseUsername: userStore.userInfo.username
})
const orParams = ref({})
const orderParams = ref({
    createTime: '2'
})

onLoad((option) => {
    if (option.e) {
        andParams.value.status = option.e
        currentTab.value = option.e
    }

})
const onSelected = (e) => {
    andParams.value.type = e[0][0].value
    pagingRef.value.reload()

}
const dateChange = (e: string) => {
    andParams.value.createTime = e
    pagingRef.value.reload()
}
const reset = () => {
    andParams.value.type = ''
    andParams.value.createTime = ''
    pagingRef.value.reload()
}

const tabChange = (e: any) => {
    console.log(e)
    if (e === 0) {
        andParams.value.status = ''
    } else {
        andParams.value.status = e
    }
    pagingRef.value.reload()
}

const toDetail = (e: any) => {
    uni.navigateTo({
        url: '/pages/nurse/appointment/handle/detail?appointmentInfo=' + encodeURIComponent(JSON.stringify(e))
    })
}

const queryList = (pageNo: any, pageSize: any) => {
    //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
    //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
    //模拟请求服务器获取分页数据，请替换成自己的网络请求
    api.appointment.list({
        pageNo: pageNo,
        pageSize: pageSize,
        andParams: JSON.stringify(andParams.value),
        orParams: JSON.stringify(orParams.value),
        orderParams: JSON.stringify(orderParams.value),
    }).then(res => {
        if (res && res.data.code === 0) {
            let tmp = res.data.data.records
            pagingRef.value.complete(tmp);
        }
    })
}

</script>

<style scoped>

</style>